layouts

layout 생성하기
페이지에 관하여
layouts 상세

웹사이트는 보통 하나 이상의 페이지를 가지고 있으며 이 웹사이트 또한 마찬가지입니다.

Jekyll 은 HTML 뿐만 아니라 마크다운도 지원합니다. 마크다운은 순수 HTML 보다 간략하여, 컨텐츠 구조가 단순한 페이지에 (예시, 문단, 제목, 이미지만 있는 문서) 탁월한 선택입니다.

루트 디렉토리에 about.md 를 생성합니다.

구조를 통일하기 위해 index.html 을 복사하고 수정해서 about 페이지로 만들수도 있을 것입니다. 하지만 문제는 코드가 중복된다는 것입니다. 사이트에 스타일시트를 추가하는 상황을 가정해보면, 모든 페이지를 열어 <head> 에 스타일시트를 추가해야할 것입니다. 2 페이지 짜리 사이트에서는 문제될 것이 없지만, 100 페이지에 이 작업을 한다고 생각해보세요. 아주 작은 변경사항에도 시간이 많이 걸릴것입니다.

layout 생성하기

layout을 사용하는게 훨씬 더 나은 선택입니다. layout은 당신의 컨텐츠를 포장하는 템플릿입니다. _layouts 라는 디렉토리에 보관합니다.

다음과 같은 내용으로 _layouts/default.html 에 당신의 첫 번째 layout을 생성합니다:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

내용이 index.html 과 거의 똑같다는 것을 눈치챌 수 있겠지만, Front matter가 없고 페이지의 컨텐츠 부분에 변수 content 가 사용되었다는 차이점이 있습니다. content 라는 이 특별한 변수는 자신이 호출된 페이지의 컨텐츠를 렌더링 한 내용을 담고 있습니다.

index.html 에 이 layout을 사용하기 위해, layout 변수를 Front matter에 설정합니다.

---
layout: default
title: Home
---
<h1>{{ "Hello World!" | downcase }}</h1>

이렇게 하면, 출력 결과는 이전과 완벽하게 동일할 것입니다. 기억할 것은 layout으로부터 페이지(page)의 Front matter에 접근한다는 것입니다. 위 예시에서, title 은 인덱스 페이지의 Front matter에 설정되었지만 layout에서 출력되었습니다.

페이지에 관하여

about 페이지로 돌아와서, index.html 을 복사하는 대신 layout을 사용할 수 있습니다.

다음 내용을 about.md 에 추가합니다:

---
layout: default
title: About
---
# About page

This page tells you a little bit about me.

브라우저에서 http://localhost:4000/about.html 를 열어 새 페이지를 확인합니다.

layouts 상세

layout은 컨텐츠를 포장하는 템플릿입니다. 템플릿을 위한 코드를 한 곳에 보관할 수 있게 해주기 때문에 모든 페이지에 네비게이션이나 푸터를 반복해서 입력할 필요가 없습니다.

layout은 _layouts 디렉토리에 위치합니다. 관례적으로 default.html 라는 이름의 기본 템플릿을 가지고 필요에 따라 상속해서 다른 layout을 만듭니다.

layout 디렉토리
Jekyll 은 사이트 source 의 루트 또는 테마의 루트에서 _layouts 디렉토리를 찾습니다.
환경설정 파일에 layouts_dir 키를 설정해서 layout이 위치하는 디렉토리의 이름을 변경할 수 있지만, 해당 디렉토리는 반드시 사이트의 source 디렉토리에 위치해야만 합니다.

사용법

첫 단계는 default.html 에 템플릿 소스코드를 입력하는 것입니다. content 라는 특별한 변수가 있는데, 그 값은 포스트나 페이지의 렌더링 된 컨텐츠입니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <nav>
      <a href="/">Home</a>
      <a href="/blog/">Blog</a>
    </nav>
    <h1>{{ page.title }}</h1>
    <section>
      {{ content }}
    </section>
    <footer>
      &copy; to me
    </footer>
  </body>
</html>

당신은 front matter에 대해 완전한 접근권한을 가지고 있습니다. 위 예제에서, page.title 은 페이지의 front matter로부터 비롯된 것입니다.

그 다음 할 일은 어떤 layout을 사용할 것인지 페이지의 front matter에 명시하는 것입니다. 그리고 front matter defaults을 사용하면 모든 페이지에 같은 내용을 입력하지 않아도 됩니다.

---
title: My First Page
layout: default
---

This is the content of my page

이 페이지의 렌더링된 결과물입니다:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Page</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <nav>
      <a href="/">Home</a>
      <a href="/blog/">Blog</a>
    </nav>
    <h1>My First Page</h1>
    <section>
      This is the content of my page
    </section>
    <footer>
      &copy; to me
    </footer>
  </body>
</html>

상속

layout 상속은 이미 존재하는 layout에 무언가 추가해서 사이트의 일부 문서에만 적용하고자 할 때 유용합니다. 이에 대한 간단한 예시로 블로그 포스트를 들 수 있는데, 포스트에는 날짜와 작성자를 표시하지만 나머지는 기본 layout과 똑같이 보이게 하는 것입니다.

이를 위해서는 새 layout을 만들어 그 front matter에 원래의 layout을 지정해야 합니다. 다음은 _layouts/post.html 라는 이름의 layout 예시입니다:

---
layout: default
---
<p>{{ page.date }} - Written by {{ page.author }}</p>

{{ content }}

이제 포스트에는 이 layout을 사용하고 다른 페이지들에는 기본 layout을 사용합니다.

변수

layout에도 front matter을 설정할 수 있는데, 유일한 차이점은 Liquid 를 사용할 때, page 대신 layout 을 사용해야 한다는 것입니다. 예를 들면 다음과 같습니다:

---
city: San Francisco
---
<p>{{ layout.city }}</p>

{{ content }}

layouts

Table of contents

layout 생성하기

페이지에 관하여

layouts 상세

layout 디렉토리

사용법

상속

변수